<template>
	<view class="comment-detail">
		<view class="detail-opt">
		      <view
		        v-for="(item, index) in evaluateTagList"
		        :key="index"
		        :class="
		          tagId === item.id ? 'detail-opt--item-active' : 'detail-opt--item'
		        "
		        @click="chooseIt(item.id)"
		      >
		        {{ item.tag }}({{ item.count }})
		      </view>
	    </view>
		<block v-if="showPage">
		<block v-if="commentList.length>0">
		<view class="detail-item" v-for="(item, index) in commentList" :key="index">
		      <view class="item-title">
		        <view style="display: flex;align-items: center;">
		          <image
		            class="item-title--head"
		            :src="
		              item.evaluator &&
		              item.evaluator.photoUrl &&
		              item.evaluator.photoUrl != ''
		                ? item.evaluator.photoUrl
		                : require('@/static/shop/mine/head.png')
		            "
		          />
		          <view style="margin-left: 3vw; color: #333;font-size: 4vw;font-weight: bold;">{{ item.evaluator ? item.evaluator.realName : "" }}</view>
		        </view>
		        <view style="font-size: 4vw;color: #999;">
		          {{ item.time.substr(0,10) }}
		        </view>
		      </view>
		      <view class="item-score">
		        <u-rate disabled :value="item.waresScore"></u-rate>
		        <view class="van-ellipsis">
		         {{ item.model&&item.model.specificationsValue? item.model.specificationsValue.replace(/"|{|}/g, "") : "无规格" }}
		        </view>
		      </view>
		      <view class="item-comment">
		        {{ item.content }}
		      </view>
		      <view class="item-like" @click="thumbsUp(item)">
		        <view>
		          {{ item.liked }}
		          <van-icon
		            name="good-job"
		            :color="item.hadLiked ? '#ee0a24' : ''"
		          />
		        </view>
		      </view>
		</view>
		</block>
		<block v-else>
			<u-empty style="margin-top: 32vh;" text="暂无用户评价" mode="data"></u-empty>
		</block>
		</block>
	</view>
</template>

<script>
	import api from '../../untils/api.js'
	export default {
		data() {
			return {
				evaluateTagList:[],
				waresId:0,
				tagId:0,
				commentList:[],
				showPage:false,
			}
		},
		methods: {
			thumbsUp(i){
				if(!i.hadLiked){
					var obj={};
					obj.id=i.id
					api.SM_EVALUATE_LIKED(JSON.stringify(obj)).then((res)=>{
						if(res.data.header.result_code==0){
							this.init();
						}
					})
				}
			},
			chooseIt(id){
				this.tagId=id;
				this.init();
			},
		async init(){
			  this.showPage=false;
			  uni.showLoading({
			  	title:"加载中"
			  });
				var obj={nowPage:1,pageSize:9999,startRecord:0,parameters:{waresId:this.waresId,tagId:this.tagId},condition:{oredCriteria:[[]]}};
			await api.SM_EVALUATE_LIST(JSON.stringify(obj)).then((res)=>{
					this.commentList=res.data.body.exhibitDatas
				})
			this.showPage=true;
			uni.hideLoading();
			},
		},
		onLoad(i) {
			this.waresId=Number(i.id)
			this.evaluateTagList=JSON.parse(i.evaluateTagList)
			this.evaluateTagList.forEach((item)=>{
				if(item.tag=="全部"){
					this.tagId=item.id
				}
			})
			this.init();
		console.log(getCurrentPages());	
		}
	}
</script>

<style>
	.item-like{
		    display: flex;
		    justify-content: flex-end;
		    align-items: center;
		    font-size: 4vw;
		    margin-top: 5px;
	}
	.item-comment{
		   color: #333;
		    font-size: 4vw;
		    font-weight: bold;
		    margin: 2vw 0 0 5vw;
	}
	.van-ellipsis{
		margin-left: 25rpx;
		   overflow: hidden;
		    white-space: nowrap;
		    text-overflow: ellipsis;
	}
	.item-score{
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 4vw;
		    font-size: 3.4vw;
		    color: #999;
	}
	.item-title--head{
		width: 10vw;
		    height: 10vw;
		    border-radius: 5vw;
	}
	.item-title{
		  display: flex;
		  flex-direction: row;
		    justify-content: space-between;
		    align-items: center;
	}
	.detail-item{
		    width: 90vw;
			margin: 0 auto;
		    padding: 4vw;
		    background: #fff;
		    border-radius: 3vw;
		    margin-bottom: 3vw;
	}
	.detail-opt--item-active{
		    color: #237bee;
		    background: #e8eff8;
		    border: 1px solid #5a9bef;
			margin-right: 3vw;
			height: 9vw;
			border-radius: 5vw;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 3.5vw;
			padding: 3vw;
			margin-bottom: 4vw;
	}
	.detail-opt--item{
		    margin-right: 3vw;
		    height: 9vw;
		    border-radius: 5vw;
		    background: #eceff1;
		    display: flex;
		    align-items: center;
		    justify-content: center;
		    font-size: 3.5vw;
		    padding: 3vw;
		    margin-bottom: 4vw;
	}
   .comment-detail{
	   width: 100vw;
	   min-height: 100vh;
	   display: flex;
	   flex-direction: column;
	   align-items: center;
	   background: rgb(245,247,249);
   }
  .detail-opt{
	  display: flex;
	  flex-direction: row;
	  align-items: center;
	  flex-wrap: wrap;
	  width: 100vw;
	  padding-top: 30rpx;
	  padding-left: 40rpx;
  }
</style>
